<!DOCTYPE html>
<html>
<head>
    <title>金银猫CSmall金银珠宝首饰在线交易平台--金银猫CSmall</title>
    <meta name="keywords" content="{$metaKeywords}"/>
    <meta name="description" content="{$metaDesc}"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet" href="../css/common.css">
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <link type="text/css" rel="stylesheet" href="../css/eui.css">

    <style>

        #nav {
            background-color: #820c0c;
        }

        #nav li .nava {
            color: white;
        }

    </style>
</head>
<body>
<!--头部部分 开始-->

<!--登录状态栏 开始-->
<div class="topbar">
    <div class="wrap iconlist">
        <div class="memberbox width-6">嗨！欢迎来到金猫银猫 <a href="#">请登录</a> <a href="#">免费注册</a></div>
        <div class="width-6">
            <a href="#"><i class="icon_heart icon_topbar"></i>我关注的品牌</a>
            <a href="#">金猫银猫会员</a>
            <a href="#"><i class="icon_shopcart icon_topbar"></i>购物车<span id="shopcart_count">0</span>件</a>
            <span class="fav">收藏夹<i class="icon icon_dropdown"></i></span> |
            <span><i class="icon_phone icon_topbar"></i>手机版</span>
            <span class="fav">商家支持<i class="icon icon_dropdown"></i></span>
            <span class="fav"><i class="icon_shopcart icon_topbar"></i>网站导航<i class="icon icon_dropdown"></i></span>
        </div>
    </div>
</div>
<!--登录状态栏 结束-->
<div id="header">

</div>
<div style="clear:both"></div>
<div>
    <div id="nav">
        <div class=" wrap">
            <div class="logobar width-3">
                <p style="color: white;margin: 12px 0px 0px 100px;font-size: 30px">金猫银猫</p>
            </div>
            <!--搜索栏 开始-->
            <div id="searchbar" class="width-3" style="margin:15px 0px 15px 500px;">
                <form method="get" action="/searchResult.html">
                    <input type="text" name="keywords" class="txt" value="" placeholder="站内搜索"/>
                    <input style="background-color: #8c939d" type="submit" class="bt" value="搜索"/>
                    <div class="clear"></div>
                </form>
            </div>
            <!--搜索栏 结束-->

        </div>
        <div class="clear"></div>
    </div>
</div>

<div id="mainer">
    <el-container>
        <el-header></el-header>
        <el-main style="width: 1200px;margin: -50px auto 0 auto">
            <el-row :gutter="10">
                <el-col :span="4">

                    <el-menu
                            default-active="4"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">


                        <el-menu-item index="1">
                            <span slot="title">个人信息</span>
                        </el-menu-item>

                        <el-menu-item index="2">
                            <span slot="title">修改密码</span>
                        </el-menu-item>

                        <el-menu-item index="3">
                            <span slot="title">收货地址</span>
                        </el-menu-item>

                        <el-menu-item index="4">
                            <span slot="title">我的收藏</span>
                        </el-menu-item>

                        <el-menu-item index="5">
                            <span slot="title">我的订单</span>
                        </el-menu-item>

                        <el-menu-item index="6">
                            <span slot="title">我的购物车</span>
                        </el-menu-item>

                    </el-menu>
                </el-col>

                </el-col>

                <el-col :span="20">


                    <!--收藏商品信息开始-->
                    <br><br>
                    <el-table :data="dataList" style="width: 100%;" >
                        <el-table-column prop="userid" label="用户" align="center" ></el-table-column>
                        <el-table-column prop="productId" label="收藏商品信息" align="center"></el-table-column>
                        <el-table-column label="操作" align="center" >
                            <template slot-scope="scope" >
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--收藏商品信息结束-->
                </el-col>

            </el-row>

        </el-main>
        <el-footer></el-footer>
    </el-container>

</div>

</div>


<!-- 底部内容 开始 -->
<div id="footer">
    <div class="wrap">
        <div class="line"></div>
        <div class="help">
            <dl class="width-2">
                <dt>购物指南</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>购物保障</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>售后服务</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>关于我们</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-4">
                <dt>手机上金猫银猫</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>


            <div style="clear:both"></div>
        </div>
        <!-- help -->
    </div>

    <div class="copyright">
        <p class="copy wrap">
            <a href="#">关于金猫银猫</a>
            <a href="#">帮助中心</a>
            <a href="#">诚聘英才</a>
            <a href="#">联系我们</a>
            <a href="#">网站合作</a>
            <a href="#">法律声明</a>
            <a href="#">廉政举报</a><br>
            <a href="#">京东商城</a> |
            <a href="#">中国白银网</a> |
            <a href="#">央视网</a> |
            <a href="#">1号店</a> |
            <a href="#">京东商城</a> |
            <a href="#">中国白银网</a> |
            <a href="#">央视网</a> |
            <a href="#">1号店</a> <br>

            <a href="http://www.csmall.com/help.do?page=help_help_icp" target="_blank">中国增值电信业务经营许可证 B2-20140169号</a>
            <span style="line-height:1.5;"> | ©2022深圳吉吉国王文化发展有限公司 All Rights Reserved | 国家信息产业部粤ICP备14018586号</span>
            <span class="powerby">技术支持：<a href="http://www.jentian.com/" target="_blank" title="广东井田云科技有限公司">井田云</a>
                        <br>
                        <a href="http://si.trustutn.org/info?sn=131141223010513021410" target="_blank"><img
                                src="http://v.trustutn.org/images/cert/bottom_small_img.png" alt="实名认证"
                                title="实名认证"></a>
                    </span>
        </p>
    </div>
    <div class="clear"></div>
</div>
<!-- 底部内容 结束 -->
</body>


<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "#mainer",
        data() {
            return {
                dataList: [],
            }
        },
        created:function () {
            //获取收藏请求信息
            axios.get("/index/collectList?userid=1").then(function (response) {
                console.log("hhhhhhhhhhhhh")
                v.dataList = response.data;
            })
        },
        methods: {
            //删除收藏商品
            handleDelete(row){
                console.log(row);
                if (confirm("您确定删除此收藏吗?")){
                    axios.get("/index/cartDelete?id="+row.id).then(function (response) {
                        location.reload();//刷新
                    })
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },

        },



    })


</script>

</html>